<template>
	<div class="content">
		<div class="banner"></div>
		<!--版权登记-->
		<div class="copyright">
			<div class="title">
				<p class="title-a">版权服务</p>
			</div>
			<ul class="copyright-details clear">
				<router-link to="/copyrightregister" tag="li" class="register">
					<img src="../assets/u620.png" alt="">
					<p>版权登记</p>
					<div>简单四部，为权利人提供版权登记，维护合法权益</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u622.png" alt="">
					<p>版权交易</p>
					<div>发掘版权价值，实现内容变现打破版权信息孤岛，让您的版权“活”起来</div>
				</router-link>
				<router-link to="/copyrightMonitoring" tag="li" class="register">
					<img src="../assets/u618.png" alt="">
					<p>版权监测</p>
					<div>实现全作品、全平台、全时段的版权监测结合图文视听特征比对技术，电子取证，提供侵权分析报告</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u616.png" alt="">
					<p>版权维权</p>
					<div>侵权处理，专业的维权人员，确保侵权网站及时下线</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u614.png" alt="">
					<p>版权价值评估</p>
					<div>为各类文创企业、个人提供版权价值评估、对外开展版权资产管理、价值评估咨询等服务。</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u612.png" alt="">
					<p>版权托管</p>
					<div>通过作品托管系统，及时完成作品的封存托管，并取得托管凭单。该凭单可作为申请人对所托管作品享有合法权利的有效证明文件，从而可以在有关事务中作为证据使用。</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u610.png" alt="">
					<p>作品委托</p>
					<div>为各类企业、个人提供发布作品委托信息服务，并为版权需求方进行版权引进洽谈、签约等事项提供法律服务。</div>
				</router-link>
				<router-link to="/more" tag="li" class="register">
					<img src="../assets/u608.png" alt="">
					<p>版权推广</p>
					<div>对已登记的版权作品，提供平台置顶展示、站内推广、需求资讯等服务，实现权利人与需求方的无缝对接。</div>
				</router-link>
			</ul>

		</div>

	</div>
</template>

<script>
export default {
    created() {
        this.menu();
    },
    methods: {
        menu() {
            window.scrollTo(0, 0);
        }
    }
};
</script>
<style lang="scss" scoped>
.clear:after {
    display: block;
    clear: both;
    content: "";
}

.banner {
    width: 100%;
    height: 350px;
    background: url("../assets/banner4.png") no-repeat center;
    -webkit-background-size: auto 350px;
    background-size: auto 350px;
}

.register {
    cursor: pointer;
}

.content {
    min-width: 1200px;
    background-color: #fff;
    .copyright {
        width: 1200px;
        margin: 0 auto;
        padding: 50px 0 30px 0;
        .title {
            //text-align: center;
            .title-a {
                font-size: 20px;
                font-weight: bold;
                line-height: 2;
            }
        }

        .copyright-details {
            width: 100%;
            & > li.register {
                float: left;
                width: 270px;
                height: 320px;
                background-color: #fff;
                margin-right: 30px;
                margin-top: 30px;
                text-align: center;
                padding: 0 20px;
                border: 1px solid #e9e9e9;
                a {
                    color: #303030;
                }
                img {
                    display: block;
                    margin: 30px auto;
                    width: 64px;
                    height: 64px;
                }
                p {
                    font-size: 20px;
                    color: #2c85cd;
                    margin-bottom: 30px;
                }
                div {
                    font-size: 13px;
                    line-height: 2;
                }
            }
            & > li.register:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>
